<template>
    <div>
        <van-cell-group style="margin-top: 10px;">
            <van-field v-model="payPwd" type="password" placeholder="请输入原支付密码"  />
            <van-field v-model="newPayPwd"  type="password" placeholder="请输入新支付密码" />
        </van-cell-group>
        <div class="tips">
            <router-link to="/resetPassword/pay" style="color: #0079f3">忘记支付密码？</router-link>
        </div>

        <div class="btn"><van-button type="primary" @click="submit">确&nbsp;认</van-button></div>
    </div>
</template>

<script>
import md5 from 'js-md5';
export default {
    name: 'editPayPassword',
    data() {
        return {
            newPayPwd: '',
            payPwd: ''
        }
    },
    methods: {
        submit() {
            if (this.payPwd === '') {
                this.$toast('请输入原支付密码');
                return;
            }

            if (this.newPayPwd === '') {
                this.$toast('请输入新支付密码');
                return;
            }
            if (this.newPayPwd.length !== 6) {
                this.$toast('请输入6位数支付密码');
                return;
            }

            this.$http.post('/user/user/front/modifyPayPwd', {
                payPwd: md5(this.payPwd),
                newPayPwd: md5(this.newPayPwd)
            }).then(res => {
                if (res.status === 0) {
                    this.$toast.success('修改成功');
                } else {
                    this.$toast.fail(res.message);
                }
            })
        }
    }
}
</script>

<style scoped lang="scss">
.tips {
    padding: 5px 15px;
}

.btn {
    width: 100%;
    padding: 15px;
    /deep/ .van-button {
        width: 100%;
    }
}
</style>
